<template>
    <div class="reportClients-view">
        <div class="agentManage-view-query">
            <div class="view-query-left">
                <div class="view-query-list">
                    <div class="view-query-list-text">客户名称</div>
                    <div class="view-query-list-input">
                        <el-input
                                placeholder="请输入客户名称"
                                v-model="value1"
                                clearable>
                        </el-input>
                    </div>
                </div>
                <div class="view-query-list">
                    <div class="view-query-list-text">到访状态</div>
                    <div class="view-query-list-input">
                        <el-select v-model="value2" placeholder="请选择">
                            <el-option
                                    v-for="item in options1"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="view-query-list">
                    <div class="view-query-list-text">交易状态</div>
                    <div class="view-query-list-input">
                        <el-select v-model="value3" placeholder="请选择">
                            <el-option
                                    v-for="item in options2"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="view-query-list">
                    <div class="view-query-list-text">楼盘名称</div>
                    <div class="view-query-list-input">
                        <el-input
                                placeholder="请输入楼盘名称"
                                v-model="value4"
                                clearable>
                        </el-input>
                    </div>
                </div>
                <div class="view-query-list">
                    <div class="view-query-list-text">报备状态</div>
                    <div class="view-query-list-input">
                        <el-select v-model="value5" placeholder="请选择">
                            <el-option
                                    v-for="item in options3"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="view-query-list">
                    <div class="view-query-list-text">报备日期</div>
                    <div class="view-query-list-input">
                        <el-date-picker
                                v-model="value6"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </div>

                <div class="view-query-list">
                    <div class="view-query-list-text">经纪人</div>
                    <div class="view-query-list-input">
                        <el-input
                                placeholder="请输入"
                                v-model="value7"
                                clearable>
                        </el-input>
                    </div>
                </div>
                <div class="view-query-list">
                    <div class="view-query-list-text">经纪人电话</div>
                    <div class="view-query-list-input">
                        <el-input
                                placeholder="请输入"
                                v-model="value8"
                                clearable>
                        </el-input>
                    </div>
                </div>
                <div class="view-query-list">
                    <div class="view-query-list-text">经纪人所在片区</div>
                    <el-select class="view-query-list-option" v-model="value9" clearable placeholder="省">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select class="view-query-list-option" v-model="value10" clearable placeholder="市">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select class="view-query-list-option" v-model="value11" clearable placeholder="区/县">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="view-query-list">
                    <div class="view-query-list-text">组织机构</div>
                    <div class="view-query-list-input">
                        <el-select  class="view-query-list-input" v-model="value12" clearable placeholder="区/县">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="view-query-list">
                    <div class="view-query-list-text">跟进人</div>
                    <div class="view-query-list-input">
                        <el-input
                                placeholder="请输入"
                                v-model="value13"
                                clearable>
                        </el-input>
                    </div>
                </div>
            </div>

            <div class="view-query-left">

                <div class="view-query-button" @click="queryInfo">查 询</div>
                <div class="view-query-button2" @click="emptyingInfo">清 空</div>

            </div>
        </div>

        <div>
            <UserList :headlist="headlist" :contentlist="list" @selectList="selectList"></UserList>
            <Pagination :totalpag="totalpag" v-on:currentpage="currentpage"></Pagination>
        </div>
    </div>
</template>

<script>
    import UserList from '../common/user/UserList';
    import Pagination from '../common/Pagination';
    import addRole from '../common/Dialog/addRole';
    export default {
        name: "reportClients",
        data(){
            return{
                current:1,
                totalpag:0,
                value1:"",
                value2:"",
                value3:"",
                value4:"",
                value5:"",
                value6:"",
                value7:"",
                value8:"",
                value9:"",
                value10:"",
                value11:"",
                value12:"",
                value13:"",
                options1: [{
                    value: '10',
                    label: '未到访'
                }, {
                    value: '11',
                    label: '到访有效'
                }, {
                    value: '12',
                    label: '到访无效'
                }],
                options2: [{
                    value: '101',
                    label: '已认筹'
                }, {
                    value: '102',
                    label: '已认购'
                }, {
                    value: '103',
                    label: '已签约'
                }, {
                    value: '104',
                    label: '已结佣'
                }, {
                    value: '105',
                    label: '已放弃'
                }],
                options3: [{
                    value: '0',
                    label: '待确认'
                }, {
                    value: '1',
                    label: '报备成功'
                }, {
                    value: '2',
                    label: '报备失败'
                }, {
                    value: '3',
                    label: '审核中'
                }],
                input1:"",
                headlist:{
                    checkout:false,
                    operation:{
                        type:true,
                        fromurl:"reportClients",
                    },
                    list:[
                        {
                            prop:"agentId",
                            label:"报备编号",
                            width:"130",
                        },
                        {
                            prop:"clientName",
                            label:"客户姓名",
                            width:"160",
                        },{
                            prop:"clientTel",
                            label:"报备电话",
                            width:"130",
                        },{
                            prop:"reportTime",
                            label:"报备时间",
                            width:"200",
                        },{
                            prop:"agentName",
                            label:"经纪人",
                            width:"130",
                        },
                        {
                            prop:"agentMobile",
                            label:"经纪人电话",
                            width:"130",
                        },{
                            prop:"majorRegion",
                            label:"主营区域",
                            width:"200",
                        }
                        ,{
                            prop:"institutionName",
                            label:"所属机构",
                            width:"150",
                        }
                        ,{
                            prop:"houseCityName",
                            label:"项目所在片区",
                            width:"200",
                        }
                        ,{
                            prop:"avgPrice",
                            label:"楼盘均价",
                            width:"120",
                        }
                        ,{
                            prop:"nowTime",
                            label:"到访时间",
                            width:"200",
                        }
                        ,{
                            prop:"follower",
                            label:"跟进人",
                            width:"110",
                        }
                        ,{
                            prop:"r_sts",
                            label:"报备状态",
                            width:"120",
                        }
                        ,{
                            prop:"r_result",
                            label:"到访结果",
                            width:"120",
                        }
                        ,{
                            prop:"t_sts",
                            label:"交易状态",
                            width:"120",
                        }
                    ]},
                list:[],
            }
        },
        components: {
            UserList,
            Pagination,
        },
        mounted(){
            this.getlist();
        },
        methods: {
            //查询
            queryInfo(){
                if (this.value1==""&&
                    this.value2==""&&
                    this.value3==""&&
                    this.value4==""&&
                    this.value5==""&&
                    this.value6==""&&
                    this.value7==""&&
                    this.value8==""&&
                    this.value9==""&&
                    this.value10==""&&
                    this.value11==""&&
                    this.value12==""&&
                    this.value13=="") {
                    this.$message({
                        message: '没有输入或选择查询内容',
                        type: 'warning'
                    });
                }else {
                    this.getlist()
                }
            },
            //清空
            emptyingInfo(){
                    this.value1="",
                    this.value2="",
                    this.value3="",
                    this.value4="",
                    this.value5="",
                    this.value6="",
                    this.value7="",
                    this.value8="",
                    this.value9="",
                    this.value10="",
                    this.value11="",
                    this.value12="",
                    this.value13="",
                this.getlist();
            },
            //选择
            selectList(val){
                this.selectLists=val
            },
            currentpage(currentpage){
                console.log("当前页，",currentpage)
                this.current=currentpage
                this.getlist()
            },
            getlist(){
                console.log(">>>>>>>>>>>>>>")
                let _this = this;
                let majorRegion=this.value9+this.value10+this.value11
                let params={
                    current:_this.current,
                    size:10,
                    clientName:this.value1,//客户名称
                    // clientTel:this.value1,//客户电话
                    transferSts:this.value3,//交易状态
                    houseName:this.value4,//楼盘名称
                    agentName:this.value7,//经纪人
                    reportBeginTime:this.value6[0],//报备开始日期
                    reportEndTime:this.value6[1],//报备开始结束日期
                    reportSts:this.value5,//报备状态
                    agentTel:this.value8,//经纪人电话
                    majorRegion:majorRegion,//经纪人所在片区
                    follower:this.value13,//跟进人
                    result:this.value2,//到访状态
                    // clientType:this.value1,//客户类型
                }
                _this.Api.setting.clientsList(params).then((data)=>{
                    console.log(data,">>>>>>>>>>>>>>")
                    _this.totalpag=data.data.total;
                    _this.list=data.data.records;
                })
            },
        }
    }
</script>

<style scoped rel="stylesheet/scss" lang="scss">
    .reportClients-view{
        background-color: #ffffff;
        margin: 20px;
        .agentManage-view-query{
            padding: 24px;
            .view-query-left{
                display: flex;
                flex-wrap:wrap;
                .view-query-list{
                    display: flex;
                    margin-bottom: 24px;
                    margin-right: 16px;
                    .view-query-list-text{
                        font-size:14px;
                        font-family:PingFangSC-Regular;
                        font-weight:400;
                        color:rgba(0,0,0,1);
                        line-height:32px;
                        text-align: right;
                        margin-right: 8px;
                    }
                    .view-query-list-input{
                        width:160px;
                        height:32px;
                        background:rgba(255,255,255,1);
                        border-radius:4px;
                    }
                    .view-query-list-option{
                        width:140px;
                        height:32px;
                        background:rgba(255,255,255,1);
                        border-radius:4px;
                        margin-right: 8px;
                    }

                }
                .view-query-button{
                    width:65px;
                    height:32px;
                    background:rgba(24,144,255,1);
                    border-radius:4px;
                    font-size:14px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(255,255,255,1);
                    line-height:32px;
                    text-align: center;
                    cursor: pointer;
                    margin-left: 48px;
                    margin-right: 8px;
                }
                .view-query-button2{
                    width:65px;
                    height:32px;
                    background:rgba(255,255,255,1);
                    border-radius:4px;
                    border:1px #D9D9D9 solid;
                    font-size:14px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(0,0,0,0.65);
                    line-height:32px;
                    text-align: center;
                    cursor: pointer;
                }
            }
        }

    }
</style>